<template>
	<view>
		<wlk-sticky id="end" @returnParams="handleEndReturnParams" :scrollTop="scrollTop" :offsetTop="offsetTop"
			:borderHeight="borderHeight" :enable="item.params.tabMode=='fixed'?true:false">
			<view class="tabs bgw"><u-tabs :list="item.data.endCity" lineWidth="28" :activeStyle="{
                       color: themeColor,
                       fontSize: '28rpx',
                       padding:'0 9rpx',
                       fontWeight: 'bold',
                       transform: 'scale(1.05)'
                   }" :inactiveStyle="{
                       color: '#646566',
                       fontSize: '28rpx',
                       padding:'0 9rpx',
                       transform: 'scale(1)'
                   }" lineHeight="2" :current="current" :lineColor="themeColor" @click="click"></u-tabs>
			</view>
		</wlk-sticky>

		<view class="line-box" :style="[lineBoxStyle]">
			<view class="pt10">
				<view class="relative wlkflex bgw br04 mb20 overHidden" :style="[lineStyle]"
					@click="jump('/pages/line/detail?id='+line.id)" v-if="item.params.mode=='one'"
					v-for="(line,index) in item.data.lines[current]" :key="index">
					<view class="one-img">
						<image class="wd100 hg100" :src="line.images[0]" lazy-load mode="aspectFill" />
						<div class="line-start" v-if="line.site_ids[0]">
							{{line.site_ids.map(item=>item.name)}}集合
						</div>
					</view>
					<view class="one-info wlkflex align-content-between wrap">
						<view class="wd100">
							<view class="u-line-2 title">{{line.title}}</view>
							<view class="u-line-1 desc">{{line.desc}}</view>
							<view class="wlkflex tags">
								<view class="tags-item" v-for="(tag,i) in line.tagids" :key="i" v-if="i<2">
									<u-tag :text="tag.name" plain size="mini" :color="themeColor"
										:borderColor="themeColor"></u-tag>
								</view>
							</view>
						</view>
						<view class="wd100 price-info wlkflex justify-between">
							<view v-if="line.adultMinPrice>0">
								<span>￥</span>
								<span class="price">{{line.adultMinPrice}}</span>
								<span class="ml05">起</span>
							</view>
							<view v-else>
								<span class="col9">暂无库存</span>
							</view>
							<view class="sales">
								{{line.sales}}人出游
							</view>
						</view>
					</view>

				</view>
				<view class="wlkflex justify-between wrap"
					v-if="item.params.mode=='two' && item.params.styleMode != 'waterfall'">
					<view class="wd50 two-box wlkflex" v-for="(line,index) in item.data.lines[current]" :key="index">
						<view class="two-item bgw br04 mb10 overHidden" :style="[lineStyle]"
							@click="jump('/pages/line/detail?id='+line.id)">
							<view class="two-img relative">
								<image class="wd100 hg100 block" lazy-load :src="line.images[0]" mode="aspectFill" />
								<div class="line-start" v-if="line.site_ids[0]">
									{{line.site_ids.map(item=>item.name)}}集合
								</div>
							</view>
							<view class="two-info wlkflex align-content-between wrap">
								<view class="wd100">
									<view class="u-line-2 title">{{line.title}}</view>
									<view class="u-line-1 desc">{{line.desc}}</view>
									<view class="wlkflex tags">
										<view class="tags-item" v-for="(tag,i) in line.tagids" :key="i" v-if="i<2">
											<u-tag :text="tag.name" plain size="mini" :color="themeColor"
												:borderColor="themeColor"></u-tag>
										</view>
									</view>
								</view>
								<view class="wd100 price-info">
									<block v-if="line.adultMinPrice>0">
										<span>￥</span>
										<span class="price">{{line.adultMinPrice}}</span>
										<span class="ml05">起</span>
									</block>
									<block v-else>
										<span class="col9">暂无库存</span>
									</block>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="waterfall" v-else-if="item.params.mode=='two' && item.params.styleMode=='waterfall'">
					<helang-waterfall-list :status="waterfall.status" :list="waterfall.list" :reset="waterfall.reset"
						type="line" @click="clickFn" @done="doneWaterFall" ref="waterfall">
					</helang-waterfall-list>
				</view>
				<view class="big-flex" v-if="item.params.mode=='big'">
					<view class="wd100 big-box wlkflex" v-for="(line,index) in item.data.lines[current]" :key="index">
						<view class="wd100 big-item bgw br04  overHidden" :style="[lineStyle]"
							@click="jump('/pages/line/detail?id='+line.id)">
							<view class="big-img relative">
								<image class="wd100 hg100 block" lazy-load :src="line.images[0]" mode="aspectFill" />
								<div class="line-start" v-if='line.site_ids[0]'>
									{{line.site_ids.map(item=>item.name)}}集合
								</div>
							</view>
							<view class="big-info wlkflex align-content-between wrap">
								<view class="wd100">
									<view class="u-line-2 title">{{line.title}}</view>
									<view class="u-line-1 desc">{{line.desc}}</view>
									<view class="wlkflex tags">
										<view class="tags-item" v-for="(tag,i) in line.tagids" :key="i" v-if="i<4">
											<u-tag :text="tag.name" plain size="mini" :color="themeColor"
												:borderColor="themeColor"></u-tag>
										</view>
									</view>
								</view>
								<view class="wd100 price-info wlkflex justify-between">
									<view v-if="line.adultMinPrice>0">
										<span>￥</span>
										<span class="price">{{line.adultMinPrice}}</span>
										<span class="ml05">起</span>
									</view>
									<view v-else>
										<span class="col9">暂无库存</span>
									</view>
									<view class="sales">
										{{line.sales}}人出游
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="slide-flex" v-if="item.params.mode=='slide'">
					<u-scroll-list :indicator="false">
						<view class="slide-box bgw br04" :style="[lineStyle]"
							v-for="(line,index) in item.data.lines[current]" :key="index"
							@click="jump('/pages/line/detail?id='+line.id)">
							<view class="slide-img relative overHidden">
								<image class="block" lazy-load :src="line.images[0]" mode="aspectFill" />
								<div class="line-start" v-if='line.site_ids[0]'>
									{{line.site_ids.map(item=>item.name)}}集合
								</div>
							</view>
							<view class="slide-info wlkflex align-content-between wrap">
								<view class="wd100">
									<view class="u-line-2 title">{{line.title}}</view>
								</view>
								<view class="wd100 price-info">
									<block v-if="line.adultMinPrice>0">
										<span>￥</span>
										<span class="price">{{line.adultMinPrice}}</span>
										<span class="ml05">起</span>
									</block>
									<block v-else>
										<span class="col9">暂无库存</span>
									</block>
								</view>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { toUrl, pxToRpx } from '@/wlkutils/tools';
	import helangWaterfallList from '../wlk-waterfall/waterfall-list';
	import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	export default {
		name: "wlk-end",
		data() {
			return {
				// 瀑布流组件相关
				waterfall: {
					status: "",
					reset: false,
					list: []
				},
				lineBoxStyle: {},
				lineStyle: {},
				current: 0,
				offsetTop: 0,
				isFixed: false,
				fixedTop: 0
			};
		},
		computed: {
			...mapGetters(['themeColor'])
		},
		components: {
			helangWaterfallList
		},
		//属性
		props: {
			item: {
				type: Object,
				default: () => {
					return []
				}
			},
			scrollTop: {
				type: Number,
				default: 0,
				required: true,
			},
			systemInfo: {
				type: Object,
				default: () => {
					return {}
				}
			},
			borderHeight: {
				type: Number,
				default: 0,
			},
		},
		watch: {},
		created: function(e) {
			this.offsetTop = pxToRpx(this.systemInfo.statusBarHeight + 44);
			this.setLineStyle();
		},
		mounted: function() {
			this.waterfall.list = this.item.data.lines[this.current];
			this.waterfall.status = 'success';
		},
		methods: {
			doneWaterFall(height) {
				this.waterfall.reset = false;
				if (height > 0) {
					this.$emit('doneWaterFall', height)
				}
			},
			clickFn(data, index, tag) {
				this.jump('/pages/line/detail?id=' + data.id)
			},
			click(item) {
				this.current = item.index;
				this.scrollToMiddle();
				this.waterfall.reset = true;
				this.waterfall.status = 'loading';
				this.waterfall.list = [];
				setTimeout(() => {
					if (this.item.data.lines[this.current].length > 0) {
						this.waterfall.list = this.item.data.lines[this.current];
						this.waterfall.status = 'success';
					} else {
						this.waterfall.status = 'empty';
					}
				}, 10)
			},
			scrollToMiddle() {
				var that = this;
				if (this.isFixed) {
					uni.pageScrollTo({
						scrollTop: that.fixedTop, //滚动的距离
						duration: 0, //过渡时间
					})
				}
			},
			setLineStyle() {
				this.lineBoxStyle.backgroundColor = this.item.style.bgColor;
				this.lineBoxStyle.padding = '0 ' + uni.$u.addUnit(this.item.style.pageMargin / 2, 'rpx');
				if (this.item.params.styleMode == 'card') {
					this.lineStyle.boxShadow = '0 2px 4px rgba(0,0,0,.06)';
				}
			},
			handleEndReturnParams(isFixed, fixedTop) {
				this.isFixed = isFixed;
				this.fixedTop = fixedTop;
			},
			jump(path) {
				toUrl(path);
			}
		}
	}
</script>

<style lang="scss">
	.tabs {
		border-bottom: 1px solid #f3f3f3;
	}

	.line-box {
		.one-img {
			position: relative;

			image {
				width: 308rpx;
				height: 308rpx;
				display: block;
			}

			.line-start {
				position: absolute;
				right: 0;
				bottom: 40rpx;
				font-size: $font-sm;
				background-color: rgba(0, 0, 0, 0.5);
				border-radius: 4px 0 4px 0;
				padding: 6rpx 10rpx;
				color: #FFFFFF;
			}
		}

		.one-info {
			height: 270rpx;
			width: 400rpx;
			padding: 0 20rpx;
			pointer-events: none;

			.title {
				font-weight: bold;
				font-size: $font-lt;
			}

			.desc {
				font-size: $font-sm;
				color: $-color-muted;
				margin-top: 4rpx;
			}

			.tags {
				margin-top: 10rpx;

				.tags-item {
					margin-right: 10rpx;
				}
			}

			.price-info {
				color: #f4710e;
				font-size: $font-base;

				.price {
					font-size: $font-max;
				}

				.sales {
					font-size: $font-sm;
					color: $-color-muted;
				}
			}
		}

		.two-box {
			height: 552rpx;

			.two-item {
				width: 95%;
				height: 96.5%;
				overflow: hidden;
				margin: 0 auto;

				.two-img {
					height: 64%;
					position: relative;
					.line-start {
						position: absolute;
						right: 0;
						bottom: 30rpx;
						font-size: $font-sm;
						background-color: rgba(0, 0, 0, 0.5);
						border-radius: 4px 0 4px 0;
						padding: 6rpx 10rpx;
						color: #FFFFFF;
					}
				}

				.two-info {
					height: 52%;
					padding: 20rpx 20rpx 20rpx 20rpx;
					pointer-events: none;

					.title {
						font-weight: bold;
						font-size: $font-lt;
					}

					.desc {
						font-size: $font-sm;
						color: $-color-muted;
						margin-top: 4rpx;
					}

					.tags {
						margin-top: 10rpx;

						.tags-item {
							margin-right: 10rpx;
						}
					}

					.price-info {
						color: #f4710e;
						font-size: $font-base;

						.price {
							font-size: $font-max;
						}
					}
				}
			}
		}

		.big-flex {
			.big-box {
				height: 771rpx;

				.big-item {
					height: 97%;

					.big-img {
						height: 65%;
					}

					.big-info {
						height: 35%;
						padding: 20rpx 20rpx 10rpx 20rpx;
						pointer-events: none;

						.title {
							font-weight: bold;
							font-size: $font-lt;
						}

						.desc {
							font-size: $font-sm;
							color: $-color-muted;
							margin-top: 4rpx;
						}

						.tags {
							margin-top: 10rpx;

							.tags-item {
								margin-right: 10rpx;
							}
						}

						.price-info {
							color: #f4710e;
							font-size: $font-base;

							.price {
								font-size: $font-max;
							}

							.sales {
								font-size: $font-sm;
								color: $-color-muted;
							}
						}
					}
				}
			}
		}

		.slide-flex {
			.slide-box {
				height: 455rpx;
				margin-right: 20rpx;

				.slide-img {
					width: 263rpx;
					height: 65%;
					border-radius: 4px 4px 0 0;

					image {
						height: 100%;
						width: 263rpx;
					}
				}

				.slide-info {
					width: 263rpx;
					height: 35%;
					padding: 10rpx 20rpx 10rpx 20rpx;
					pointer-events: none;

					.title {
						font-weight: bold;
						font-size: $font-lt;
					}

					.price-info {
						color: #f4710e;
						font-size: $font-base;

						.price {
							font-size: $font-lg;
						}
					}
				}
			}
		}

	}
</style>